<template>
  <div class="kp-indexSearch">
    <header>
      <div class='header'>
        <span class="head_img" @click="filmReturn"><img src="../../assets/left-1.png" /></span>
        <div class='searchheadercon'>
          <div class='searchinput'>
            <input @input="searchcity" placeholder="请输入关键词" v-model="searchVal" />
          </div>
        </div>
        <div class='cancel' @click="searchcity">搜索</div>
      </div>
    </header>
    <div class='resultcon'>
      <div class="resultmovie">
        <div class='resultlist' v-for="(item,index) in resultdata" @click="scenry(item.scenicId,item.scenicType,index)">
          <!--<div class='leftsearchresult'>
						<img class='scenicimg' src='../../assets/jiudiansearch.png'></img>
						<span></span>
					</div>-->
          <div class='leftsearchresult' v-if="item.type==2">
            <img class='scenicimg' src='../../assets/jingqusearch.png'></img>
            <span>{{item.scenicName}}</span>
          </div>
          <div class='priceright'><span style='color: #e43c26;' v-if="item.type==2">{{item.scenicMinPrice}}</span><span
              class="sz">起</span></div>
        </div>
      </div>

      <div class='historysearch' v-if="resultdata.length<=0&&historydata.length>0">
        <div class="resultmovie">
          <div class='resultlist' v-for="(item,index) in historydata" @click="scenryin(item.scenicId,item.scenicType)">
            <div class='leftsearchresult'>
              <img class='scenicimg' src='../../assets/jingqusearch.png'></img>
              <span>{{item.scenicName}}</span>
            </div>
            <div class='priceright'><span style='color: #e43c26;' v-if="item.type==2">{{item.scenicMinPrice}}</span><span
                class="sz">起</span></div>
          </div>
        </div>
        <div style='' class='clearresultlist' @click="delAll()">
          清除历史记录
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        searchVal: '',
        resultdata: [],
        historydata: [],
        latitude: '',
        longitude: '',
        currentcity: '',
        cityid: '',
      }
    },
    mounted() {
      //载入后执行
      if (localStorage.getItem('indexHistorysearch')) {
        var historydata = JSON.parse(localStorage.getItem('indexHistorysearch'));
        this.historydata = historydata;
      }

    },
    methods: {
      //方法放置
      filmReturn() {
        this.$router.go(-1);
      },
      searchcity() {
        if (this.searchVal.length > 0) {
          let param = {
            "Latitude": this.cityinfo.latitude,
            "keyWords": this.searchVal,
            "Longitude": this.cityinfo.longitude,
            "CityId": this.cityid,
          }
          this.$http.post(this.$baseUrl.baseurl + "xcscenic/homeSearch", param).then((res) => {
            console.log(res);
            if (res.data.Code = "0") {
              this.resultdata = res.data.Result.searchList;
            } else {
              this.$toast(res.data.msg);
            }

          }).catch((err) => {

          });
        } else {
          this.resultdata = [];
        }

      },
      getcityid() {
        this.cityid = this.$route.query.cityid;
      },
      backscenic() {

      },
      scenry(scenicId, scenicType, index) {
        this.$router.push({
          path: '/index/scenic/scenicContent',
          query: {
            "scenicId": scenicId,
            "scenicType": scenicType,
          }
        })
        var value = localStorage.getItem('indexHistorysearch');
        //				var item = this.searchVal;
        var item = this.resultdata[index];
        if (value) { //判断有没有历史记录
          var issave = true;
          var value = JSON.parse(value);
          value.forEach((item1, index) => {
            if (item1.scenicName == item.scenicName) {
              issave = false
            }
          })
          if (issave) { //储存历史记录
            if (value.length > 4) {
              value = value.slice(1, value.length)
            }
            value.push(item)
          }
          localStorage.setItem('indexHistorysearch', JSON.stringify(value));
        } else {
          var historycity = [];
          historycity.push(item);
          localStorage.setItem('indexHistorysearch', JSON.stringify(historycity));
        }
      },
      scenryin(scenicId, scenicType) {
        this.$router.push({
          path: '/index/scenic/scenicContent',
          query: {
            "scenicId": scenicId,
            "scenicType": scenicType,
          }
        })
      },
      delAll() { //清空历史
        localStorage.removeItem('indexHistorysearch');
        this.historydata = [];
      },
    },
    created() {
      this.getcityid();
    },
    watch: {
      //监听放置
      '$route': 'getcityid'
    },
    components: {},
    computed: {
      ...mapState({
        cityinfo: state => state.common.cityinfo,
      })
    }
  };
</script>
<style scoped>
  .kp-search {
    background-color: #F4F5F9;
  }

  .header {
    height: 90px;
    width: 100%;
    background: rgb(59, 195, 194);
    position: fixed;
    top: 0px;
    z-index: 99;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .head_img {
    display: block;
    width: 36px;
    height: 36px;
  }

  .head_img>img {
    width: 36px;
    height: 36px;
  }

  .searchinput {
    background: #fff;
    opacity: 0.8;
    height: 63px;
    position: relative;
    padding: 0 20px;
    border-radius: 3px;
    width: 90%;
    margin: auto;
  }

  .searchinput>input {
    outline: none;
    background: none;
    border: none;
  }

  .searchheadercon {
    width: 70%;
  }

  .searchinput {
    display: flex;
    align-items: center;
  }

  .searchinput input {
    height: 70px;
    padding: 0 20px;
    font-size: 28px;
    width: 100%;
  }

  .searchicon {
    float: left;
    width: 40px;
    height: 40px;
    position: relative;
  }

  .cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #fff;
  }

  .resultcon {
    padding: 0 30px;
    margin-top: 90px;
    z-index: 0;
  }

  .priceright {
    color: #939393;
    margin-right: 20px;
  }

  .resultlist {
    font-size: 28px;
    height: 86px;
    color: #444;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }

  .historysearch {
    margin-top: 90px
  }

  .clearresultlist {
    font-size: 28px;
    height: 86px;
    color: #444;
    line-height: 87px;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #3BC3C2;
    font-size: 32px;
  }

  .resultlist span {
    line-height: 1.5;
    width: 90%;
    float: left;
    display: inline-block;
  }

  .leftsearchresult {
    flex: 1;
  }

  .priceright span {
    display: inline-block;
    width: auto;
    float: left;
  }

  .scenicimg {
    width: 36px;
    height: 38px;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    top: 4px;
    float: left;
  }

  .sz {
    font-size: 22px;
  }
</style>
